<template>
    <div class="dcimSelectGroup" v-if="resetData">
        <dcim-select
                v-for="(item, index) in groupList"
                :key="`${item.id}-${index}`"
                :serious="item.id"
                :list="item.data"
                :is-default="getThirdVal && index < 2 ? isDefault : true"
                @children="children"
                @itemId="itemId"
                @selected="selected"
        ></dcim-select>
    </div>
</template>

<script>
    import DcimSelect from "../sub-common/dcimSelectComponent";

    export default {
        name: "dcimSelectGroup",
        props: {
            getThirdVal: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            recoverDefault: {
                type: Object,
                default: () => {
                    return {
                        state: false
                    }
                }
            },
            selectList: { // 下拉子集列表，默认数组
                type: Array,
                default: () => {
                    return []
                }
            },
            isDefault: { // 是否显示默认文字
                type: Boolean,
                default: () => {
                    return false
                }
            }
        },
        components: {DcimSelect},
        data() {
            return {
                groupList: [], // 下拉组列表
                selectedGroup: [], // 选中的值列表
                order: 0,
                hasChildren: false,
                isClick: false,
                resetData: true
            }
        },
        watch: {
            selectList: function(val) {

                this.setDataForGroupList(val)

            },
            'recoverDefault.state': function (val) {

                const $this = this
                
                if (val) {

                    $this.groupList = []

                    $this.resetData = false

                    if ($this.getThirdVal) {

                        $this.order = 0

                        $this.selectedGroup = [$this.selectList[0].data[0].children[0]]

                        $this.filterSelectListBeforeTh($this.selectList)

                    }else {

                        $this.groupList = [$this.selectList[0]]

                    }

                    setTimeout(() => {

                        $this.resetData = true

                        $this.recoverDefault.state = false

                    }, 0)

                }

            },
            // selectList: function (val) {
            //
            //     const $this = this
            //
            //     if (!$this.isDefault && !$this.isClick) {
            //
            //         const {id, name} = val[0].data[0]
            //
            //        $this.$emit('selectedGroup', [{id: id, name: name}])
            //
            //     }
            //
            // }
        },
        created() {

            const $this = this

            if ($this.selectList.length <= 0) return

            $this.setDataForGroupList()

        },
        methods: {
            setDataForGroupList() {

                const $this = this

                if ($this.getThirdVal) {

                    $this.filterSelectListBeforeTh($this.selectList)

                    $this.$emit('selectedGroup', $this.groupList[1].data[0])

                } else {

                    $this.groupList = $this.selectList

                }
            },
            filterSelectListBeforeTh(obj) {

                const $this = this

                if (obj.length <= 0) return

                $this.order += 1

                if ($this.groupList.length < 3) {

                    if ($this.groupList.length <= 0) {

                        $this.groupList.push({isDefault: false, id: $this.order, data: obj[0].data})

                        $this.filterSelectListBeforeTh(obj[0].data[0].children)

                    }else {

                        $this.groupList.push({isDefault: false, id: $this.order, data: obj})

                        if (obj[0].hasChildren) {

                            $this.filterSelectListBeforeTh(obj[0].children)

                        }

                    }

                }

            },
            /**
             * 返回选中的值集合
             * @param val 选中的值
             * @param index 选中的项的索引
             * @param id 选中的项的ID
             */
            selected(data, e, index) {
                const $this = this
                // const { id, name } = data
                $this.isClick = true

                if ($this.selectedGroup.length < index) {

                    $this.selectedGroup.push(data)

                } else {

                    $this.selectedGroup.splice(index - 1, 1, data)

                    if ($this.selectedGroup.length - 1 >= index) {

                        //if ($this.order === index) return

                        $this.selectedGroup = $this.selectedGroup.slice(0, index + 1)

                        //console.log('selectedData=', data)
                        if (!data) {

                            $this.selectedGroup.splice($this.selectedGroup.length - 1, 1)

                        } else {

                            $this.selectedGroup.splice($this.selectedGroup.length - 1, 1, 'all')

                        }

                    }

                }

                const dataLength = $this.selectedGroup.length,
                    spliceVal = $this.selectedGroup[dataLength - 1]
                let resultData = null

                spliceVal && spliceVal !== 'all' ? resultData = spliceVal : resultData = $this.selectedGroup[dataLength - 2]

                $this.$emit('selectedGroup', resultData, e)
            },
            /**
             * 选择全部时，改变groupList的值
             * @param id
             * @param index
             */
            itemId(id, index) {
                const $this = this
                if (id === 'all') {
                    $this.groupList = $this.groupList.slice(0, index)
                   // $this.order = 0
                }
            },
            /**
             * 在改变下拉列表内值时，改变groupList的值
             * @param index
             * @param arr
             */
            children(index, arr) {
                const $this = this

                const indexId = parseInt(index) + 1

                if ($this.compareItemVal(indexId).length > 0) {

                    $this.groupList.splice(index, 1, {
                        id: indexId,
                        data: arr
                    })

                    setTimeout(() => {
                        $this.groupList = $this.groupList.slice(0, indexId)
                    }, 0)

                    if ($this.getThirdVal && $this.groupList.length < 3) {

                        $this.groupList.push({id: indexId + 1, data: arr[0].children})

                    }

                } else {

                    $this.groupList.push({id: indexId, data: arr})
                    //$this.order = index

                }

                // if ($this.order === index) {
                //
                //     $this.groupList[index].data = arr
                //
                //     $this.order = index
                //
                // } else {
                //
                //
                //
                // }

            },
            compareItemVal(index) {
                return this.groupList.filter((item) => {

                    return index === item.id

                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .dcimSelectGroup
        display: inline-block
</style>
